<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style >
      .close{
        display: none;
      }
  </style>
</head>
<body>
  <div id="app">
    <!-- v-bind:属性="属性值"
     绑定动态属性 
     id class style type checked value
     placeholder disabled 
     src herf -->
    <div>
        <a v-bind:href="hr">去百度</a>
        <!-- v-bind的简写 
           :属性="属性值"  -->
        <a id="box" :href="tianmao">去天猫</a>
        <!-- 动态渲染class 和src属性 -->
        <img :class="myclass" :src="imgsrc" alt="">
        <!-- 动态渲染class 和style -->
        <button @click="change">点击切换</button>
        <div :style="divSty" :class=" flag?'':'close'">
          显示隐藏
        </div>
        <div :style="{width:'300px',height:'200px',background:bk}">你好</div>
        

    </div> 
    <div >

    </div>
  </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
          el:"#app",
          data(){
            return {
              hr:"https://www.baidu.com",
              tianmao:"https://www.tianmao.com",
              imgsrc:"https://img1.baidu.com/it/u=2761319049,4116036198&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
              myclass:"close",
              flag:true,
              divSty:{ //style动态数据
                  width:"500px",
                  height:"400px",
                  background:"red",
                  fontSize:"30px"
              },
              bk:"skyblue"

            }
          },
          methods: {
            change(){//切换效果
              this.flag=!this.flag;
            }
          },
        })
    </script>
</body>
</html>